<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Progress Bar examples - Basic Features</title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="../../build/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="../../build/base/base.css">

<link rel="stylesheet" type="text/css" href="../../build/slider/assets/skins/sam/slider.css" />

<link rel="stylesheet" type="text/css" href="../../build/progressbar/assets/skins/sam/progressbar.css">

<link rel="stylesheet" type="text/css" href="http://developer.yahoo.com/yui/assets/dpSyntaxHighlighter.css">

<!-- js -->
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<script type="text/javascript" src="../../build/element/element-min.js"></script>

<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/slider/slider-min.js"></script>


<script type="text/javascript" src="../../build/progressbar/progressbar-debug.js"></script>

<style type="text/css">

#valueSet,#rangeSet,#sizeSet {
	float:left;
	clear:left;
	width:50%;
}

#animSet{
	float:right;
	width:50%;
}

#basic .yui-pb{
	margin:0 auto;
}

fieldset {
	border: thin solid silver;
	background-color:#F0F0F0;
	padding:1em;
	margin:1em;

	*position: relative;
	*margin: 0 0 1em 0;
    *padding-top:.75em;
}

fieldset p {
	margin:0 1em;
}

legend {
	font-weight:bold;
	margin:0 0.5em;
	padding:0 0.2em;

	*position:absolute;
    *top: -.5em;
    *left: .5em;
}

.disabled {
	color:silver;
}

code {
	background-color:#e0e0e0;
	border:thin solid #c0c0c0;
	white-space:pre;
	font-size:10px;
}

.dp-highlighter th, .dp-highlighter td {
	border:0;
	padding:0;
}
.dp-highlighter .line1, .dp-highlighter  .line2 {
	padding-left:10px;
	white-space:nowrap;
}

</style>
</head>
<body class="yui-skin-sam">

	<div id="doc">
		<div id="hd">
			<h1>Progress Bar examples - Basic Features</h1>
			<p>This example shows the simplest ProgressBar with the default skin, 
			with a control box that allows you to change various settings.</p>
		</div>
		<div id="bd">
			<div id="basic" ></div>
			<fieldset id="control">
				<legend>Control</legend>
				<fieldset id="valueSet">
					<legend>Value</legend>
					<div id="sliderValue" class="yui-h-slider" tabindex="-1" title="Value slider">
						<div id="sliderValueThumb" class="yui-slider-thumb"><img src="../../build/slider/assets/thumb-n.gif"></div>
					</div>
					<p>
						<label>Set: <span id="value">50</span> </label> &nbsp;
						<label> Actual <span id="actualValue">50</span></label>
					</p>
				</fieldset>

				<fieldset id="rangeSet">
					<legend>Range</legend>
					<div id="sliderRange" class="yui-h-slider" title="Range slider">
						<div id="sliderRangeMinThumb" class="yui-slider-thumb"><img src="../../build/slider/assets/thumb-e.gif"></div>
						<div id="sliderRangeMaxThumb" class="yui-slider-thumb"><img src="../../build/slider/assets/thumb-w.gif"></div>
					</div>
					<p>
						<label>Min: <span id="minValue">0</span> </label>  &nbsp;
						<label> Max: <span id="maxValue">100</span></label>
					</p>
				</fieldset>

				<fieldset id="sizeSet">
					<legend>Size</legend>

					Width<div id="sliderWidth" class="yui-h-slider" tabindex="-1" title="Width slider">
						<div id="sliderWidthThumb" class="yui-slider-thumb"><img src="../../build/slider/assets/thumb-n.gif"></div>
					</div>
					Height
					<div id="sliderHeight" class="yui-h-slider" tabindex="-1" title="Height slider">
						<div id="sliderHeightThumb" class="yui-slider-thumb"><img src="../../build/slider/assets/thumb-n.gif"></div>
					</div>
					<p> 
						<label>Width: <span id="width">200</span>px </label>  &nbsp;
						<label> Height: <span id="height">20</span>px</label>
					</p>
				</fieldset>
				<fieldset id="animationSet" class="disabled">
					<legend>Animation</legend>
					<p style="color:black;"><input type="checkbox" id="anim" /> Enable animation</p>
					Duration<div id="sliderDuration" class="yui-h-slider" tabindex="-1" title="Duration slider">
						<div id="sliderDurationThumb" class="yui-slider-thumb"><img src="../../build/slider/assets/thumb-n.gif"></div>
					</div>
					<p> 
						<label>Duration <span id="duration">200</span> second(s)</label>
					</p>
					<fieldset id="easing">
						<legend>Easing</legend>
						<input type="radio" name="easing" value="easeNone" id="easeNone"/> easeNone<br/>
						<input type="radio" name="easing" value="backBoth" /> backBoth<br/>
						<input type="radio" name="easing" value="backIn" /> backIn<br/>
						<input type="radio" name="easing" value="backOut" /> backOut<br/>
						<input type="radio" name="easing" value="bounceBoth" /> bounceBoth<br/>
						<input type="radio" name="easing" value="bounceIn" /> bounceIn<br/>
						<input type="radio" name="easing" value="bounceOut" /> bounceOut<br/>
						<input type="radio" name="easing" value="easeBoth" /> easeBoth<br/>
						<input type="radio" name="easing" value="easeBothStrong" /> easeBothStrong<br/>
						<input type="radio" name="easing" value="easeIn" /> easeIn<br/>
						<input type="radio" name="easing" value="easeInStrong" /> easeInStrong<br/>
						<input type="radio" name="easing" value="easeOut" /> easeOut<br/>
						<input type="radio" name="easing" value="easeOutStrong" /> easeOutStrong<br/>
						<input type="radio" name="easing" value="elasticBoth" /> elasticBoth<br/>
						<input type="radio" name="easing" value="elasticIn" /> elasticIn<br/>
						<input type="radio" name="easing" value="elasticOut" /> elasticOut<br/>
					</fieldset>
				</fieldset>

			</fieldset>
		</div>
		<div id="ft">
			<p>The ProgressBar itself is created with this code:</p>
			<textarea name="code" class="JScript" cols="60" rows="1">
				var pb = new YAHOO.widget.ProgressBar({value:50}).render('basic');
			</textarea>
			
			<p>Most of the code in this example deals with handling the interface, the sliders and other input controls.
			When a value is changed, it is simply applied to the corresponding property of the ProgressBar. 
			The ProgressBar responds when the slider is released, not while it is moving.
			Leaving aside all the interface details, these are the statements that deal with those settings:</p>
			<textarea name="code" class="JScript" cols="60" rows="1">
				pb.set('value',valueSlider.getValue());
				pb.set('minValue',rangeSlider.minValue);
				pb.set('maxValue',rangeSlider.minValue);
				pb.set('width',widthSlider.getValue());
				pb.set('height',heightSlider.getValue());
				
				pb.set('anim',checkBoxEl.checked);
				
				var anim = pb.get('anim');
				if (anim) { 
					anim.duration = durationSlider.getValue(); 
				}
				
				var anim = pb.get('anim');
				if (anim) { 
					anim.method = YAHOO.util.Easing[inputEl.value]; 
				}
			</textarea>
			<p>In all cases, the scaling factors from the pixel range of the Sliders to the values used for the ProgressBar have been omitted.
			Most values are set directly, those related to animation are set depending on the existence of an Anim object.  The <code>anim</code>
			attribute, while it receives a boolean it returns the current instance of Anim.   The <code>value</code> attribute of the radio buttons
			for selecting the easing method, have been set to the actual names of the methods 
			so it is easy to locate them in the <code>YAHOO.util.Easing</code> object.  The ProgressBar rejects values outside of the range
			given by <code>minValue</code> and <code>maxValue</code> so the slider goes back to whichever the actual value was read from the ProgressBar itself.</p>
		</div>
	</div>
	
<script  type="text/javascript">


	YAHOO.util.Event.onDOMReady( function () {
		var Dom = YAHOO.util.Dom,
			Event = YAHOO.util.Event;
			
		var pb = new YAHOO.widget.ProgressBar({value:50}).render('basic');

		var valueSlider = YAHOO.widget.Slider.getHorizSlider('sliderValue',  
            'sliderValueThumb', 0, 200, 0
		);
		valueSlider.animate = false;
		valueSlider.setValue(100);
		
		valueSlider.subscribe("change", function(offsetFromStart) {
			var value = offsetFromStart   - 50;
			Dom.get('value').innerHTML = value;
		});
		
		valueSlider.subscribe("slideEnd", function() {
			var value = valueSlider.getValue()  - 50;
			pb.set('value',value);
			var actual = pb.get('value');
			Dom.get('actualValue').innerHTML = actual;
			if (actual != value) {
				window.setTimeout(function() {
					valueSlider.setValue(actual + 50,true,true,true); // make sure it doesn't fire the event again.
				},1);
			}
		});

		var rangeSlider = YAHOO.widget.Slider.getHorizDualSlider("sliderRange",
            "sliderRangeMinThumb", "sliderRangeMaxThumb",
            200, 0, [50,150]
		);
		rangeSlider.animate = false;
		rangeSlider.subscribe('change', function() {
			var value = Math.round(this.minVal  - 50);
			Dom.get('minValue').innerHTML = value;
			value = Math.round(this.maxVal  - 50);
			Dom.get('maxValue').innerHTML = value;
		}); 
		rangeSlider.subscribe('slideEnd', function() {
			var value = Math.round(this.minVal - 50);
			pb.set('minValue',value);
			value = Math.round(this.maxVal - 50);
			pb.set('maxValue',value);
		}); 

		var widthSlider = YAHOO.widget.Slider.getHorizSlider('sliderWidth',  
            'sliderWidthThumb', 0, 200, 0
		);
		widthSlider.animate = false;
		widthSlider.setValue(100);
		widthSlider.subscribe("change", function(offsetFromStart) {
			var value = offsetFromStart * 2;
			Dom.get('width').innerHTML = value;
		});
		widthSlider.subscribe("slideEnd", function() {
			var value = widthSlider.getValue() * 2;
			pb.set('width',value);
		});


		var heightSlider = YAHOO.widget.Slider.getHorizSlider('sliderHeight',  
            'sliderHeightThumb', 0, 200, 0
		);
		heightSlider.animate = false;
		heightSlider.setValue(50);
		heightSlider.subscribe("change", function(offsetFromStart) {
			var value = Math.round(offsetFromStart / 2.5);
			Dom.get('height').innerHTML = value;
		});
		heightSlider.subscribe("slideEnd", function() {
			var value = Math.round(heightSlider.getValue() / 2.5);
			pb.set('height',value);
		});

		Dom.get('anim').checked = false;
		Event.on('anim','click',function(ev) {
			var checked = Event.getTarget(ev).checked;
			pb.set('anim',checked);
			if (checked) {
				Dom.removeClass('animationSet','disabled');
			} else {
				Dom.addClass('animationSet','disabled');
			}
		});
			
		var durationSlider = YAHOO.widget.Slider.getHorizSlider('sliderDuration',  
            'sliderDurationThumb', 0, 200, 0
		);
		durationSlider.animate = false;
		durationSlider.setValue(20);
		durationSlider.subscribe("change", function(offsetFromStart) {
			var value = offsetFromStart / 20;
			Dom.get('duration').innerHTML = value;
		});
		durationSlider.subscribe("slideEnd", function() {
			var value = durationSlider.getValue() / 20;
			var anim = pb.get('anim');
			if (anim) { anim.duration = value; }
		});

		Dom.get('easeNone').checked = true;
		Event.on('easing','click',function(ev) {
			var anim = pb.get('anim');
			if (!anim) { return; }
			var input = Event.getTarget(ev);
			if (input.tagName.toUpperCase() != 'INPUT') { return; }
			anim.method = YAHOO.util.Easing[input.value];
		});
	});
</script>
<script type="text/javascript" src="http://developer.yahoo.com/yui/assets/dpSyntaxHighlighter.js"></script>
<script type="text/javascript" language="javascript">dp.SyntaxHighlighter.HighlightAll('code');</script>
</body>
</html>
	
